<template>
  <div class="primary">
    <PersonalHeader :content="1"></PersonalHeader>

    <section class="primarymain">
      <section class="type">
        <h2 class="title">
          {{$t('gaiphone[0]')}}
          <p> {{$t('gaiphone[1]')}}</p>
        </h2>
        <ul class="contt">
          <el-form
            label-position="top"
            label-width="80px"
            :model="formLabelAlign"
            :rules="rules"
            ref="ruleForm"
            prop="name"
          >
            <el-form-item :label="$t('gaiphone[2]')" prop="phone">
              <div style="display: flex">
                <el-select v-model="formLabelAlign.area_code" style="width: 30%">
                  <el-option
                    v-for="(item,index) in area_codes"
                    :key="index"
                    :label="item.country"
                    :value="item.code"
                  ></el-option>
                </el-select>
                <el-input style="flex: 1" v-model="formLabelAlign.phone" :placeholder="$t('gaiphone[3]')"></el-input>
              </div>
            </el-form-item>
            <el-form-item :label="$t('mobile[9]')" prop="code">
              <el-input v-model="formLabelAlign.v_code" :placeholder="$t('zijin[5]')">
                <template slot="append">
                  <el-button @click="Verificationfun()">{{Verification.text}}</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit" :loading="loading">{{$t('senior[8]')}}</el-button>
            </el-form-item>
          </el-form>
        </ul>
      </section>
    </section>
  </div>
</template>

<script>
import { phoneBind } from "@/api/securitycenter";
import PersonalHeader from "_dom/personalheader";
import { Passwordencryption, EmailSms } from "@/libs/util";
import { areaCodes } from "@/api/user";
export default {
  name: "syphone",
  data() {
    var validatePass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t('gaiphone[4]')));
      } else if (EmailSms(value)) {
        if (this.$public.email(value)) {
          callback();
        } else {
          callback(new Error(this.$t('regz[18]')));
        }
      } else {
        if (this.$public.phone(value)) {
          callback();
        } else {
          callback(new Error(this.$t('regz[19]')));
        }
      }
    };
    return {
      formLabelAlign: {
        phone: "",
        v_code: "",
        area_code: ""
      },
      Verification: {
        text:  this.$t('reg[0]'),
        time: 60,
        type: true,
        timer: ""
      },
      loading: false,
      rules: {
        phone: [{ validator: validatePass1, trigger: "blur" }],
        code: [
        //   { required: true, message: this.$t('gaiphone[5]'), trigger: "change" }
        ]
      }
    };
  },
  methods: {
    handleSubmit() {
      //修改登录密码
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.loading = true;
          phoneBind(this.formLabelAlign)
            .then(res => {
              this.loading = false;
                this.$message({
                  message: this.$t('gaiphone[6]'),
                  type: "success"
                });
                setTimeout(() => {
                  this.$router.push({ path: "/securitycenter" });
                }, 800);
            })
            .catch(error => {});
        }
      });
    },
    Verificationfun() {
      if (!this.formLabelAlign.phone) {
        this.$message.error(this.$t('gaiphone[7]'));
        return false;
      }
      if (!this.Verification.type) {
        return false;
      }
      var _data = {
        type: "2",
        phone: this.formLabelAlign.phone,
        area_code: this.formLabelAlign.area_code,
        from: 'register'
      };
      this.$public.captcha(_data, this);
    },
    typecaptcha() {
      this.Verification.type = false;
      this.Verification.timer = setInterval(() => {
        this.Verification.time--;
        if (this.Verification.time < 1) {
          clearInterval(this.Verification.timer);
          this.Verification.type = true;
          this.Verification.time = 60;
          this.Verification.text = this.$t('reg[1]');
        } else {
          this.Verification.text = this.Verification.time + "S";
        }
      }, 1000);
    }
  },
  created() {
    areaCodes()
      .then(res => {
        this.area_codes = res;
        this.formLabelAlign.area_code = res[0].code;
      })
      .catch(() => {
        this.$message({
          message: "区号获取失败！",
          type: "warning"
        });
      });
  },
  beforeEach: function(to, from, next) {
    clearInterval(this.Verification.timer);
    next();
  },
  components: {
    PersonalHeader
  }
};
</script>

